<template>
  <div class="container">
    <div class="container-left">
      <div class="swiperBox">
        <el-carousel height="300px">
          <el-carousel-item v-for="(item, index) in swiperArr" :key="index">
            <img style="width: 100%; height: 100%" :src="item.cover" alt="" />
            <div class="swiperTitle" @click="golistDet(item.id)">
              <h2>{{ item.title }}</h2>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <div class="tabBox">
        <div class="Acticle_tab">
          <div class="ActicleTabBox">
            <ul class="ActicleTabBox_ul">
              <van-skeleton
                title
                avatar
                :row="3"
                :loading="loading"
                
              >
                <div style="background: #ccc;"></div>
              </van-skeleton>
              <li
                @click="gotabDet(item.value)"
                v-for="(item, index) in tabArr"
                :key="index"
              >
                {{ item.label }}
              </li>
            </ul>
          </div>
          <div class="Acticle_tab_list">
            <div
              v-for="(item, index) in listArr"
              :key="index"
              class="ActicleListBox"
              @click="golistDet(item.id)"
            >
              <p class="ActicleListBox_bigTitle">
                <span class="ActicleListBox_hover">{{ item.title }}</span>
                <span class="ActicleListBox_line">|</span>
                <span class="ActicleListBox_title">
                  {{ item.category.label }}
                </span>
              </p>

              <p class="ActicleListBox_p">
                <img class="ActicleListBox_img" :src="item.cover" alt="" />
                <span><van-icon name="like-o" />{{ item.likes }}</span>
                <span><van-icon name="eye-o" />{{ item.views }}</span>
                <span>·</span><span><i class="el-icon-share"></i>share</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container-right">
      <div class="rightBox1">
        <Reommend />
      </div>
      <div class="rightBox2">
        <tagTitle />
      </div>
    </div>
  </div>
</template>

<script>
import {
  articleSwiper,
  GetData,
  TagTitle,
  ActicleTab,
  ActicleList,
} from "../../api/index";
import Reommend from "../../components/Reommend";
import tagTitle from "../../components/tagTitle";
export default {
  components: {
    Reommend,
    tagTitle,
  },
  data() {
    return {
      swiperArr: [],
      remonendsArr: [],
      tagArr: [],
      tabArr: [],
      listArr: [],
      loading: true
    };
  },
  mounted() {
    this.getSwiper();
    this.GetData();
    this.TagTitle();
    this.getActicleTab();
    this.getActicleList();
    this.loading = false;
  },
  methods: {
    
    toTop() {
      document.documentElement.scrollTop = 0;
    },
    async getSwiper() {
      const { data } = await articleSwiper();
      this.swiperArr = data.data;

      console.log(data.data);
    },
    async GetData() {
      const { data } = await GetData();
      this.remonendsArr = data.data;
      console.log(data.data);
    },
    async TagTitle() {
      const { data } = await TagTitle();
      this.tagArr = data.data;
      console.log(data.data);
    },
    async getActicleList() {
      const { data } = await ActicleList();
      this.listArr = data.data[0];
      console.log(data.data[0]);
    },
    async getActicleTab() {
      const { data } = await ActicleTab();
      this.tabArr = data.data;
      console.log(data.data);
      this.tabArr.unshift({
        articleCount: 1,
        createAt: "2022-11-18T06:33:52.536Z",
        id: "b8f1d56a-4813-4ffb-9f52-2f16eb92bae1",
        label: "all",
        updateAt: "2023-01-05T05:57:45.000Z",
        value: "教育",
      });
    },

    gotabDet(id) {
      this.$router.push(`/tabdetail/${id}`);
    },
    golistDet(id) {
      this.$router.push(`/detail/${id}`);
    },
    goSwiperDet(id) {
      this.$router.push(`/detail/${id}`);
    },
  },
};
</script>

<style lang="scss" scoped>
body {
  font-size: 14px;
}
:root {
  font-size: 14px;
  margin: 0;
  padding: 0;
  --background: #f4f4f4;
  --contentBackground: #fff;
  --titlecolor: #000;
  --titleHcolor: #333;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 14px;
}
.top{
    position: fixed;
    width: 30px;
    height: 30px;
    bottom: 50px;
    right: 100px;
    border-radius: 20px;
     border: none;
     color: #fff;
    background-color: #ccc;
  }
.container {
  width: 1000px;
  height: 305vh;
  margin: 0 auto;
  position: relative;
  margin-top: 20px;
  .container-left {
    width: 650px;
    height: 100%;
    float: left;
    .swiperBox {
      height: 300px;
      background: var(--contentBackground);
      width: 650px;
      margin-bottom: 20px;
      .swiperTitle {
        color: #ddd;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.5);
        text-align: center;
        line-height: 300px;
      }
    }
    .tabBox {
      width: 650px;
      background: var(--contentBackground);

      .Acticle_tab {
        .ActicleTabBox {
          width: 100%;
          height: 40px;
          color: var(--titleHcolor);
          border-bottom: 1px solid #ccc;
          .ActicleTabBox_ul li {
            color: var(--titleHcolor);
            float: left;
            margin-right: 30px;
            line-height: 40px;
            margin-left: 20px;
          }
          .ActicleTabBox_ul li:hover {
            color: red;
          }
        }
      }
      .Acticle_tab_list {
        margin-top: 20px;
        color: var(--titleHcolor);

        .ActicleListBox {
          width: 100%;
          height: 150px;
          border-bottom: 1px solid #ccc;
          .ActicleListBox_bigTitle {
            margin-left: 20px;
            margin-top: 10px;
          }
          .ActicleListBox_img {
            width: 120px;
            height: 100px;
            margin: 10px 20px 0 20px;
          }
          .ActicleListBox_p span {
            margin-left: 5px;
            color: #6b6863;
          }
          .ActicleListBox_hover {
            font-size: 16px;
            font-weight: bold;
          }
          .ActicleListBox_hover:hover {
            color: red;
          }
          .ActicleListBox_title {
            color: #7a7e89;
          }
          .ActicleListBox_line {
            color: #7a7e89;
            margin: 0 5px 0 5px;
          }
        }
      }
    }
  }
  .container-right {
    width: 330px;
    height: 100%;
    float: right;
    position: fixed;
    top: 80px;
    right: 260px;
    .rightBox1 {
      width: 330px;
      height: 270px;
      background: var(--contentBackground);
      margin-left: 60px;

      color: var(--titleHcolor);
      margin-bottom: 30px;
      .rightBox-Remmoend li:hover {
        color: red;
      }
      .rightBox-Remmoend li {
        width: 290px;
        height: 32px;
        // 文字溢出部分显示...
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .rightBox-Remmoend .vscode {
        color: #000000a6;
      }
      .rightBox1 ul li {
        margin-top: 10px;
      }
      .tagTitle {
        width: 318px;
        height: 50px;
        line-height: 50px;
        font-size: 18px;
        border-bottom: 1px solid #f4f4f4;
        position: relative;
      }
      .tagTitle b {
        margin-top: 8px;
        position: absolute;
        margin-left: 5px;
      }
      .rightBox-Remmoend {
        width: 318px;
        height: 230px;
      }
      .rightBox-Remmoend ul li {
        margin-top: 6px;
      }
    }

    .rightBox2 {
      width: 330px;
      height: 270px;
      background: var(--contentBackground);
      margin-left: 70px;

      color: var(--titleHcolor);
      .tagTitle {
        width: 330px;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        border-bottom: 1px solid #f4f4f4;
        position: relative;
      }
      .tagTitle b {
        margin-top: 8px;
        position: absolute;
        margin-left: 5px;
      }
      .titleArr li {
        float: left;
        color: var(--titleHcolor);

        width: 80px;
        height: 25px;
        line-height: 25px;
        margin: 7px 10px 3px 5px;
        border: solid 1px #ddd;
        text-align: center;
      }

      .titleArr li:hover {
        color: red;
      }
    }
  }
}
.remonendBox {
  animation: wrapper-gradient 2s linear;
}
.titleArr {
  animation: wrapper-gradient 2s linear;
}
@keyframes wrapper-gradient {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes img-gradient {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
</style>
